<template>
  <div class="personal-center">
    <el-card class="profile-card">
      <div class="profile-header">
        <el-avatar :size="100" :src="userInfo.avatar" />
        <div class="profile-info">
          <h2>{{ userInfo.name }} ({{ userInfo.employeeId }})</h2>
          <p>{{ userInfo.position }} | {{ userInfo.department }}</p>
          <el-tag type="success">{{ userInfo.status }}</el-tag>
        </div>
        <el-button type="primary" icon="el-icon-edit" @click="showEditDialog">编辑信息</el-button>
      </div>
    </el-card>

    <el-tabs v-model="activeTab" class="info-tabs">
      <el-tab-pane label="基本信息" name="basic">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="员工编号">{{ userInfo.employeeId }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ userInfo.gender }}</el-descriptions-item>
          <el-descriptions-item label="出生日期">{{ userInfo.birthDate }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
          <el-descriptions-item label="入职日期">{{ userInfo.entryDate }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ userInfo.department }}</el-descriptions-item>
          <el-descriptions-item label="职位">{{ userInfo.position }}</el-descriptions-item>
          <el-descriptions-item label="职级">{{ userInfo.level }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <el-tab-pane label="学历信息" name="education">
        <el-table :data="userInfo.educations" style="width: 100%">
          <el-table-column prop="degree" label="学历" width="120" />
          <el-table-column prop="school" label="学校" />
          <el-table-column prop="major" label="专业" />
          <el-table-column prop="graduationDate" label="毕业时间" width="120" />
          <el-table-column label="操作" width="100">
            <template #default>
              <el-button type="text" size="small">查看证书</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="工作经历" name="experience">
        <!-- 工作经历表格 -->
      </el-tab-pane>

      <el-tab-pane label="合同信息" name="contract">
        <!-- 合同信息表格 -->
      </el-tab-pane>
    </el-tabs>

    <!-- 编辑信息对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑个人信息" width="50%">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="手机号">
          <el-input v-model="editForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editForm.email" />
        </el-form-item>
        <el-form-item label="紧急联系人">
          <el-input v-model="editForm.emergencyContact" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="editForm.emergencyPhone" />
        </el-form-item>
        <el-form-item label="关系">
          <el-input v-model="editForm.emergencyRelation" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePersonalInfo">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'PersonalCenter',
  setup() {
    const activeTab = ref('basic')
    const editDialogVisible = ref(false)

    const userInfo = reactive({
      name: '张三',
      employeeId: 'EMP10001',
      position: '前端开发工程师',
      department: '技术部/前端组',
      gender: '男',
      birthDate: '1992-05-15',
      phone: '13800138000',
      email: 'zhangsan@company.com',
      entryDate: '2020-03-12',
      level: 'P6',
      status: '在职',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      educations: [
        { degree: '本科', school: '北京大学', major: '计算机科学与技术', graduationDate: '2014-06' },
        { degree: '硕士', school: '清华大学', major: '软件工程', graduationDate: '2017-06' }
      ]
    })

    const editForm = reactive({
      phone: userInfo.phone,
      email: userInfo.email,
      emergencyContact: '李四',
      emergencyPhone: '13900139000',
      emergencyRelation: '配偶'
    })

    const showEditDialog = () => {
      editDialogVisible.value = true
    }

    const savePersonalInfo = () => {
      userInfo.phone = editForm.phone
      userInfo.email = editForm.email
      ElMessage.success('个人信息更新成功')
      editDialogVisible.value = false
    }

    return {
      activeTab,
      userInfo,
      editDialogVisible,
      editForm,
      showEditDialog,
      savePersonalInfo
    }
  }
}
</script>

<style scoped>
.personal-center {
  padding: 20px;
}

.profile-card {
  margin-bottom: 20px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 30px;
}

.profile-info h2 {
  margin: 0 0 10px 0;
}

.profile-info p {
  margin: 0 0 10px 0;
  color: #666;
}

.info-tabs {
  margin-top: 20px;
}
</style>